<template>
  <el-row class="upper" justify="space-between">
    <el-col :span="4">
      <el-card
        body-style="display:flex; justify-content: space-evenly;align-items: center;"
        shadow="hover"
        style="border-radius: 20px"
      >
        <el-icon :size="40" class="no-inherit" color="#66b1ff">
          <Grid />
        </el-icon>
        <p class="num">服务数 : {{ datas.serviceNum }}</p>
      </el-card>
    </el-col>

    <el-col :span="4">
      <el-card
        body-style="display:flex; justify-content: space-evenly;align-items: center;"
        shadow="hover"
        style="border-radius: 20px"
      >
        <el-icon :size="40" class="no-inherit" color="#409efc">
          <View />
        </el-icon>
        <p class="num">当日请求量 : {{ datas.serviceNum }}</p>
      </el-card>
    </el-col>

    <el-col :span="4">
      <el-card
        body-style="display:flex; justify-content: space-evenly;align-items: center;"
        shadow="hover"
        style="border-radius: 20px"
      >
        <el-icon :size="40" class="no-inherit" color="#409efc">
          <Histogram />
        </el-icon>
        <p class="num">当前QPS : {{ datas.serviceNum }}</p>
      </el-card>
    </el-col>

    <el-col :span="4">
      <el-card
        body-style="display:flex; justify-content: space-evenly;align-items: center;"
        shadow="hover"
        style="border-radius: 20px"
      >
        <el-icon :size="40" class="no-inherit" color="#66b1ff">
          <UserFilled />
        </el-icon>
        <p class="num">租户数 : {{ datas.serviceNum }}</p>
      </el-card>
    </el-col>
  </el-row>

  <el-row class="down" justify="space-between">
    <el-col :span="13">
      <el-card>
        <div ref="lineChartObj" style="width: 700px; height: 500px"></div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card>
        <div ref="pieChartObj" style="width: 500px; height: 500px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Grid, Histogram, UserFilled, View } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const datas = ref({
  serviceNum: 0,
  yesterday: [],
  today: [],
})
// 图表实例（对应原 data 中的 chart）
let lineChartObj = ref(null)
let pieChartObj = ref(null)

// 设置图表配置（对应原 methods 中的 setOptions）
const lineOptions = ref({
  title: {
    text: '日流量统计',
    textStyle: { fontSize: 15 },
  },
  xAxis: {
    data: [
      '00:00',
      '01:00',
      '02:00',
      '03:00',
      '04:00',
      '05:00',
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00',
    ],
    axisTick: { show: true },
    axisLine: {
      lineStyle: {
        width: '700px',
      },
    },
  },
  grid: {
    left: 10,
    right: 10,
    bottom: 20,
    top: 45,
    containLabel: true,
    show: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' },
    padding: [5, 10],
  },
  yAxis: {
    type: 'value',
    name: '',
    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        width: '500px',
      },
    },
  },
  legend: {
    data: ['今日', '昨日'],
  },
  series: [
    {
      name: '今日',
      type: 'line',
      data: [120, 132, 101, 182, 1111, 234, 210],
    },
    {
      name: '昨日',
      type: 'line',
      data: [900, 182, 541, 234, 0, 130, 310, 101],
    },
  ],
})
const pieOptions = ref({
  title: {
    text: '服务类型占比',
    textStyle: { fontSize: 15 },
  },
  legend: {
    top: 'bottom',
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
    },
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 150],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 3,
      },
      data: [
        { value: 40, name: 'HTTP' },
        { value: 38, name: 'TCP' },
        { value: 32, name: 'GRPC' },
      ],
    },
  ],
})

onMounted(() => {
  // 基于准备好的dom (这里是div chart容器)，初始化echarts实例
  const lineChart = echarts.init(lineChartObj.value)
  const pieChart = echarts.init(pieChartObj.value)

  // 使用刚指定的配置项和数据显示图表。
  lineChart.setOption(lineOptions.value)
  pieChart.setOption(pieOptions.value)
  // 图表根据窗口大小 自适应 完整显示
  window.addEventListener('resize', () => {
    lineChart.resize()
    pieChart.resize()
  })
})
</script>

<style lang="less" scoped>
.upper {
  padding: 30px;
}

.down {
  padding: 30px;
}
</style>
